<template>
  <div class="edit-list-warpper">
    <el-button
      v-for="(item, index) in editList"
      :key="index"
      :class="[item.active ? 'select-btn' : '']"
      class="edit-btn"
      @click="btnClick(item)"
    >
      {{ item.label }}
    </el-button>
  </div>
</template>

<script>
import { getPlatformCanBeUpdated } from '@/api/shop-manage'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editList: []
    }
  },
  created() {
    this.handleGetPlatformCanBeUpdated()
    // const result = {
    //   'data': {					// 对照表请看说明
    //     // "0": "修改标题",
    //     // "1": "修改上下架",
    //     '2': '修改品牌',
    //     // "3": "修改预售",
    //     '4': '删除商品',
    //     '5': '修改sku编码',
    //     // "6": "修改商品编码",
    //     // "7": "修改团购价", // ！！！这个前端对应的是“价格”
    //     // "8": "修改库存",
    //     // "9": "修改主图",
    //     // "10": "修改详情图",
    //     '11': '修改详情文本',
    //     '12': '修改主图补齐',
    //     // "13": "修改两件打折", // ！！！这个前端对应的是“满减折扣”
    //     // "14": "修改运费模板",
    //     '15': '修改服务'
    //     // "16": "修改短标题",
    //     // "17": "修改sku规格"
    //   },
    //   'code': 200,
    //   'msg': '成功'
    // }
    // console.log('后端返回的数据，前端用一个注释一个，剩余这些 => ', result)
    // this.list = [
    //   {
    //     label: '标题',
    //     value: 0
    //   },
    //   {
    //     label: '短标题',
    //     value: 16
    //   },
    //   {
    //     label: '上下架',
    //     value: 1
    //   },
    //   {
    //     label: '预售',
    //     value: 3
    //   },
    //   {
    //     label: '规格（sku）',
    //     value: 17
    //   },
    //   {
    //     label: '商品编码',
    //     value: 6
    //   },
    //   {
    //     label: '运费模板',
    //     value: 14
    //   },
    //   {
    //     label: '库存',
    //     value: 8
    //   },
    //   {
    //     label: '价格',
    //     value: 7
    //   },
    //   {
    //     label: '商品主图',
    //     value: 9
    //   },
    //   {
    //     label: '商品详情图',
    //     value: 10
    //   },
    //   {
    //     label: '满减折扣',
    //     value: 13
    //   },
    //   {
    //     label: '商品描述',
    //     value: 666666
    //   },
    //   {
    //     label: '商品卖点',
    //     value: 666666
    //   },
    //   {
    //     label: '商品备注',
    //     value: 666666
    //   },
    //   {
    //     label: '承诺发货时间',
    //     value: 666666
    //   },
    //   {
    //     label: '是否限购',
    //     value: 666666
    //   },
    //   {
    //     label: '退款规则',
    //     value: 666666
    //   },
    //   {
    //     label: '服务承诺',
    //     value: 666666
    //   },
    //   {
    //     label: '是否二手',
    //     value: 666666
    //   },
    //   {
    //     label: '假一赔十',
    //     value: 666666
    //   },
    //   {
    //     label: '商品属性(无...)',
    //     value: 666666
    //   }
    // ]
    // this.list.forEach(item => this.$set(item, 'active', false))
    // console.log('前端的数据', this.list)
  },
  methods: {
    // 获取本平台可以批量修改的功能
    handleGetPlatformCanBeUpdated() {
      getPlatformCanBeUpdated().then(res => {
        console.log(res)
        for (const key in res.data) {
          this.editList.push({
            label: res.data[key],
            value: key
          })
        }
        this.editList.forEach(item => this.$set(item, 'active', false))
        console.log(this.editList)
      })
    },
    btnClick(val) {
      this.editList.forEach(item => {
        if (item.label === val.label) {
          item.active = !val.active
          this.$emit('editListClick', val)
        } else {
          item.active = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-list-warpper {
  max-width: 970px;
  .edit-btn {
    margin: 12px 6px 0;
    padding: 10px 4px;
    width: 108px;
    color: #4E78EF;
    border: 1px solid #4E78EF;
    &.select-btn {
      background-color: #4E78EF;
      color: #fff;
    }
  }
}
</style>
